<template>
  <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="ruleForm.email":disabled="true"></el-input>
  </el-form-item>
  <el-form-item label="原密码" prop="oldpassword">
    <el-input v-model="ruleForm.oldpassword" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm()">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
</template>


<script>
import indexApi from '@/api/form/index.js'
  export default {
    data() {
      return {
        ruleForm: {
          password: '',
          email: document.cookie.split("vue_admin_template_token=")[1].split(";")[0],
          oldpassword:'',
          checkPass: '',
        },
        rules: {
        email: [{
          required: true,
          type: 'email',
          message: '请输入邮箱',
          trigger: 'blur'
        }],
        oldpassword: [{
          required: true,
          type: 'string',
          message: '请输入旧密码',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '新密码',
          trigger: 'blur'
        }, { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/, message: '密码必须同时包含数字与字母,且长度为 6-12位' }],
        checkPass: [{
          required: true,
          message: '确认密码',
          trigger: 'blur'
        }, {
          validator: (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'))
            } else if (value !== this.ruleForm.password) {
              callback(new Error('两次输入密码不一致'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }]

      }
      };
    },
    methods: {
      submitForm() {
        const user = {
            password: this.ruleForm.password,
            oldpassword: this.ruleForm.oldpassword
          }
        indexApi.Change(user).then(response => {

            this.$alert('修改成功', '密码修改', {
              confirmButtonText: '确定',
              callback: action => {
                    this.$router.push(`/login`)
                  }
              })
            
      })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>